*{margin: 0;padding: 0;}
body,.game,html{height: 100%;}
body{background-color: #5eabff; position: relative;}

.clearfix:after {content:""; display: block; clear:both; }
.pixel{width: 10px;height: 10px;}
.container{ position: absolute;bottom:50px;left:0;right:0;top:0;}
.CartoonBox{ width: 60px; margin: 0 auto;display:flex;position: absolute; transition-duration: 0.2s;transition-timing-function: linear;}
.CartoonBox>.col{ flex:1;}
.CartoonBox>.col>div{width: 5px; height: 5px;}
.CartoonBox>.col>.fleshColor{background-color:#FDE29F}
.CartoonBox>.col>.brown{background-color:#A8871E}
.CartoonBox>.col>.red{background-color:#F84C1A}
.CartoonBox>.col>.green{background-color:#3bba0c}
.bigGun{width: 90px; height: 90px; position: absolute; bottom: 0; left: 50%; margin-left: -45px;}
.bigGun>.row{display:flex;}
.bigGun>.row>div{width: 5px; height: 5px;flex: 1;}
.black{background-color:#000}
.white{background-color:#fff}
.orange{ background-color:#f4771b;}
#wallBox{ position: absolute;bottom: 0;left: 0;right: 0;}
#wallBox>.brickCol{ box-sizing: border-box; background-color: #ff6e02;overflow: hidden;height: 10px;border-top: 1px solid #000;border-bottom: 1px solid #000;}
#wallBox>.brickCol>.wall{box-sizing: border-box;border-left: 1px solid #000;border-right: 1px solid #000;display: inline-block;float: left;}
#marioBox{bottom: 0;left: 30px;}
#luigiBox{bottom: 0;right: 30px;transform: rotateY(180deg);}
.MarioJump:hover{animation: jump 1s infinite;}
@keyframes jump
{
    0% {bottom:0}
    50% {bottom:100px}
    100% {bottom:0px}
}
.Logo{ width: 220px; height: 95px; margin: 150px auto 0;}
.Logo>div{float: left; margin:0 5px;}
.Logo .v{ border: 1px solid;}
.Logo .row>div{width: 3px;height: 3px;float: left; border: 1px solid #5eabff;}
.Logo .font{ background-color: black; animation: color 3s infinite 1s;}
@keyframes color
{
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: black; left:200px; top:200px;}
    75%  {background: white; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}
.Copyright{
    padding: 5px 0;
    text-align: center;color:#fff; font-size: 12px;
}
.PacMan{
    width:100px;
    height:100px;
    border-radius:50%;  
    overflow: hidden;
    position: absolute;  
    top: 20px;
    left: 20px;   
}
.PacMan .half{
    position: absolute;
    top: 0;left: 0;
    width:100px;
    height:100px; animation:rotate 1s ease infinite;
  
}
.PacMan .half-bottom{
    bottom: 0;left: 0;
    width:100px;
    height:100px; 
    overflow: hidden;
    transform: rotate(180deg);
    animation:rotateBottom 1s ease infinite;
}
.PacMan .circle{ 
    width: 100px;
    height: 50px;  overflow: hidden;
    background-color: #ffd804; 
    }
    .PacMan .eyes{
        position: absolute;
        background-color: #000;
        height: 10px;width: 10px;border-radius: 50%;
        right: 40px;top: 20px;
        z-index: 2;
    }

    
@keyframes rotate{
     50%{
        transform:rotate(-45deg);
    }  
     100%{
        transform:rotate(0deg);
    }  
}
@keyframes rotateBottom{
    50%{
       transform:rotate(225deg);
   }  
    100%{
       transform:rotate(180deg);
   }  
}
.link{ text-align: center; margin-top: 50px;}/*使用1player样式*/
.link a{ color: #fff; font-size: 14px; display: block;}